<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米商城</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/fonts.css">
</head>

<body>
<!-- 顶部栏 -->
<div class="topBar">
<div class="container">
<div class="topBar_list">
    <a href="#">小米商城</a>
    <span>|</span>
    <a href="#">MIUI</a>
    <span>|</span>
    <a href="#">loT</a>
    <span>|</span>
    <a href="#">云服务</a>
    <span>|</span>
    <a href="#">金融</a>
    <span>|</span>
    <a href="#">有品</a>
    <span>|</span>
    <a href="#">小爱开放平台</a>
    <span>|</span>
    <a href="#">政企服务</a>
    <span>|</span>
    <a href="#">资质证照</a>
    <span>|</span>
    </div>
<div class="shop">
    <a href="#">
        <i class="iconfont" style="font-size: 14px;">&#xe61b;</i>
        购物车(0)
    </a>
</div>
<div class="login">
    <a href="#">登录</a>
    <span>|</span>
    <a href="#">注册</a>
    <span>|</span>
    <a href="#">消息通知</a>
</div>
</div>
</div>
<!-- 导航栏 -->
<div class="header">
<div class="container">
<div class="site-logo">
    <a href="#">
        <img src="images/logo.png" width="56" height="56">
    </a>
</div>
<div class="site-list">
    <ul class="clearfix">
        <li class="site-category">
            <a href="">
                <img src="images/mifen.gif" width="163" height="66">
            </a>
            <!-- 侧边栏 -->
            <div class="category-list">
                <ul>
                    <li>
                        <a href="#">
                            手机 电话卡
                            <span class="iconfont">&#xe605;</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            电视 盒子
                            <span class="iconfont">&#xe605;</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            笔记本 平板
                            <span class="iconfont">&#xe605;</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            家电 插线板
                            <span class="iconfont">&#xe605;</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            出行 穿戴
                            <span class="iconfont">&#xe605;</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            智能 路由器
                            <span class="iconfont">&#xe605;</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            电源 配件
                            <span class="iconfont">&#xe605;</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            健康 儿童
                            <span class="iconfont">&#xe605;</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            耳机 音响
                            <span class="iconfont">&#xe605;</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            生活 箱包
                            <span class="iconfont">&#xe605;</span>
                        </a>
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <a href="#">Redmi红米</a>
        </li>
        <li>
            <a href="#">电视</a>
        </li>
        <li>
            <a href="#">笔记本</a>
        </li>
        <li>
            <a href="#">家电</a>
        </li>
        <li>
            <a href="#">路由器</a>
        </li>
        <li>
            <a href="#">智能硬件</a>
        </li>
        <li>
            <a href="#">服务</a>
        </li>
        <li>
            <a href="#">社区</a>
        </li>
    </ul>
</div>
<div class="site-search">
    <form action="">
        <input type="text" name="shop" class="search-text">
        <input type="submit" class="search-btn iconfont" value="&#xe60b;" style="font-size: 24px;">
        <div class="search-word">
            <a href="#">小米10</a>
            <a href="#">小米10 SE</a>
        </div>
    </form>
</div>
</div>
</div>
<!-- 主页内容 -->
<div class="site-content">
<div class="container">
<!-- 轮播图 -->
<div class="site-slider">
    <a href="#">
        <img src="images/yuan.jpg" width="100%" height="430">
    </a>
    <span class="next"></span>
    <span class="prev"></span>
    <div class="slider-item">
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    </div>
</div>
<!-- 向导 -->
<div class="content-sub">
    <!-- 向导左 -->
    <div class="content-channel">
        <ul class="channel-list clearfix">
            <li>
                <a href="#">
                    <i class="iconfont">&#xe641;</i>
                    选购手机
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont">&#xe790;</i>
                    企业团购
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont">&#xe603;</i>
                    F码通道
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont">&#xe602;</i>
                    米粉卡
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont">&#xe60f;</i>
                    以旧换新
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont">&#xe601;</i>
                    话费充值
                </a>
            </li>
        </ul>
    </div>
    <!-- 向导右 -->
    <div class="content-list">
        <ul class="clearfix">
            <li>
                <a href="#">
                    <img src="images/image1.jpg">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/image2.jpg">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/image3.jpg">
                </a>
            </li>
        </ul>
    </div>
</div>
</div>
<div class="content-banner">
    <div class="container">
        <a href="#">
            <img src="images/banner.jpg">
        </a>
    </div>
</div>
</div>
<!-- 内容详情 -->
<div class="content-desc">
<div class="container">
<!-- 标题 -->
<div class="box-hd">
    <h2>手机</h2>
    <div class="more">
        <a href="#">
            查看全部
            <i class="iconfont">&#xe605;</i>
        </a>
    </div>
</div>
<!-- 内容 -->
<div class="box-bd">
    <div class="row clearfix">
        <!-- 内容左边 -->
        <div class="row-l">
            <a href="#">
                <img src="images/iphone.jpg">
            </a>
        </div>
        <!-- 内容右边 -->
        <div class="row-r">
            <ul>
                <li>
                    <!-- 图像 -->
                    <div class="figure">
                        <a href="#">
                            <img src="images/figure1.jpg">
                        </a>
                    </div>
                    <!-- 标题 -->
                    <h3 class="title">
                        <a href="#">
                            小米9 6GB+128GB
                        </a>
                    </h3>
                    <p class="desc">
                        骁龙855，索尼4800万超广角微距三摄
                    </p>
                    <p class="price">
                        <span class="num">2999</span>元
                    </p>
                    <div class="flag flag-new">新品</div>
                </li>
                <li>
                    <!-- 图像 -->
                    <div class="figure">
                        <a href="#">
                            <img src="images/figure2.jpg">
                        </a>
                    </div>
                    <!-- 标题 -->
                    <h3 class="title">
                        <a href="#">
                            小米9 6GB+128GB
                        </a>
                    </h3>
                    <p class="desc">
                        骁龙855，索尼4800万超广角微距三摄
                    </p>
                    <p class="price">
                        <span class="num">2999</span>元
                    </p>
                    <div class="flag flag-new">新品</div>
                </li>
                <li>
                    <!-- 图像 -->
                    <div class="figure">
                        <a href="#">
                            <img src="images/figure3.jpg">
                        </a>
                    </div>
                    <!-- 标题 -->
                    <h3 class="title">
                        <a href="#">
                            小米9 6GB+128GB
                        </a>
                    </h3>
                    <p class="desc">
                        骁龙855，索尼4800万超广角微距三摄
                    </p>
                    <p class="price">
                        <span class="num">2999</span>元
                    </p>
                    <div class="flag flag-new">新品</div>
                </li>
                <li>
                    <!-- 图像 -->
                    <div class="figure">
                        <a href="#">
                            <img src="images/figure4.png">
                        </a>
                    </div>
                    <!-- 标题 -->
                    <h3 class="title">
                        <a href="#">
                            小米9 6GB+128GB
                        </a>
                    </h3>
                    <p class="desc">
                        骁龙855，索尼4800万超广角微距三摄
                    </p>
                    <p class="price">
                        <span class="num">2999</span>元
                    </p>
                    <div class="flag flag-new">新品</div>
                </li>
                <li>
                    <!-- 图像 -->
                    <div class="figure">
                        <a href="#">
                            <img src="images/figure5.jpg">
                        </a>
                    </div>
                    <!-- 标题 -->
                    <h3 class="title">
                        <a href="#">
                            小米9 6GB+128GB
                        </a>
                    </h3>
                    <p class="desc">
                        骁龙855，索尼4800万超广角微距三摄
                    </p>
                    <p class="price">
                        <span class="num">2999</span>元
                    </p>
                    <div class="flag flag-new">新品</div>
                </li>
                <li>
                    <!-- 图像 -->
                    <div class="figure">
                        <a href="#">
                            <img src="images/figure6.jpg">
                        </a>
                    </div>
                    <!-- 标题 -->
                    <h3 class="title">
                        <a href="#">
                            小米9 6GB+128GB
                        </a>
                    </h3>
                    <p class="desc">
                        骁龙855，索尼4800万超广角微距三摄
                    </p>
                    <p class="price">
                        <span class="num">2999</span>元
                    </p>
                    <div class="flag flag-new">新品</div>
                </li>
                <li>
                    <!-- 图像 -->
                    <div class="figure">
                        <a href="#">
                            <img src="images/figure7.jpg">
                        </a>
                    </div>
                    <!-- 标题 -->
                    <h3 class="title">
                        <a href="#">
                            小米9 6GB+128GB
                        </a>
                    </h3>
                    <p class="desc">
                        骁龙855，索尼4800万超广角微距三摄
                    </p>
                    <p class="price">
                        <span class="num">2999</span>元
                    </p>
                    <div class="flag flag-new">新品</div>
                </li>
                <li>
                    <!-- 图像 -->
                    <div class="figure">
                        <a href="#">
                            <img src="images/figure8.jpg">
                        </a>
                    </div>
                    <!-- 标题 -->
                    <h3 class="title">
                        <a href="#">
                            小米9 6GB+128GB
                        </a>
                    </h3>
                    <p class="desc">
                        骁龙855，索尼4800万超广角微距三摄
                    </p>
                    <p class="price">
                        <span class="num">2999</span>元
                    </p>
                    <div class="flag flag-new">新品</div>
                </li>
             
            </ul>
        </div>
    </div>
</div>
</div>
</div>
<!-- 脚部 -->
<div class="footer">
<div class="container">
    <div class="footer-service">
        <ul class="clearfix">
            <li class="first">
                <a href="#">
                    <i class="iconfont">&#xe629;</i>
                    预约维修服务
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont">&#xe629;</i>
                     七天无理由退货
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont">&#xe629;</i>
                    15天免费换货
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont">&#xe629;</i>
                    满99包邮
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="iconfont">&#xe629;</i>
                    520余家售后网点
                </a>
            </li>
        </ul>
    </div>
    <div class="footer-links clearfix">
        <dl class="col-links">
            <dt>帮助中心</dt>
            <dd>账户管理</dd>
            <dd>购物指南</dd>
            <dd>订单操作</dd>
        </dl>
        <dl class="col-links">
            <dt>服务支持</dt>
            <dd>售后政策</dd>
            <dd>自助服务</dd>
            <dd>相关下载</dd>
        </dl>
        <dl class="col-links">
            <dt>线下门店</dt>
            <dd>小米之家</dd>
            <dd>服务网点</dd>
            <dd>授权体验店</dd>
        </dl>
        <dl class="col-links">
            <dt>关于小米</dt>
            <dd>了解小米</dd>
            <dd>加入小米</dd>
            <dd>投资者关系</dd>
            <dd>廉洁举报</dd>
        </dl>
        <dl class="col-links">
            <dt>关注我们</dt>
            <dd>新浪微博</dd>
            <dd>官方微信</dd>
            <dd>联系我们</dd>
            <dd>公益基金会</dd>
        </dl>
        <dl class="col-links">
            <dt>特色服务</dt>
            <dd>F码通道</dd>
            <dd>礼物码</dd>
            <dd>防伪查询</dd>
        </dl>
        <div class="col-contact">
            <p class="iphone">400-100-5678</p>
            <p>周一至周日 8:00-18:00
                <br>（仅收市话费）
            </p>
            <a href="#">
                <i class="iconfont">&#xe641;</i>
                联系客服
            </a>
        </div>
    </div>
</div>
</div>
</body>
</html>
